<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
import { getMineScoreStatisticsServe } from "@/api/scoringStatistics"
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";

const animationDuration = 6000;
const legend = ["product", "12分", "9分", "6分", "3分", "0分"];
const scoreKeys = [12, 9, 6, 3, 0];

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "500px",
    },
  },
  data() {
    return {
      chart: '',
    };
  },
  mounted() {
    if (!this.chart) {
      this.chart = echarts.init(this.$el, "macarons");
    }
    this.getMineScoreStatistics();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    getMineScoreStatistics() {
      getMineScoreStatisticsServe().then(res => {
        if (res.code == 200) {
          let source = this.dealSource(res.data)
          this.initChart(source);

        }
      })
    },
    dealSource(data) {
      let source = [];
      data.map(item => {
        let itemArr = [], scoreMap = {};
        itemArr.push(item.city);
        item.child.forEach(el => {
          scoreMap[el.score] = el.scoreNumber;
        });
        scoreKeys.map(i => {
          if (scoreMap[i]) {
            itemArr.push(scoreMap[i]);
          } else {
            itemArr.push(0);
          }
        })
        source.push(itemArr);
      })
      source.unshift(legend)
      return source;
    },
    initChart(source) {
      this.chart.setOption({
        title: {
          text: "各区计分统计",
          textStyle: {
            //标题内容的样式
            color: "#1e2c3c",
            fontStyle: "normal", //主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
            fontWeight: "800", //可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
            fontFamily: "san-serif", //主题文字字体，默认微软雅黑
            fontSize: 16, //主题文字字体大小，默认为18px

          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          show: true, // 是否显示图例
        },
        grid: {
          top: 50,
          left: "2%",
          right: "2%",
          bottom: "3%",
          containLabel: true,
        },
        dataset: {
          source: source,
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            type: "bar",
            barGap: 0,
            barWidth: 50,
            label: {
              show: true,
              position: "top", // 顶部显示
              // formatter: "{c}",
            },
          },
          {
            type: "bar",
            barWidth: 50,
            label: {
              show: true,
              position: "top", // 顶部显示
              // formatter: "{c}",
            },
          },
          {
            type: "bar",
            barWidth: 50,
            label: {
              show: true,
              position: "top", // 顶部显示
              // formatter: "{c}",
            },
          },
          {
            type: "bar",
            barWidth: 50,
            label: {
              show: true,
              position: "top", // 顶部显示
              // formatter: "{c}",
            },
          },
          {
            type: "bar",
            barWidth: 50,
            label: {
              show: true,
              position: "top", // 顶部显示
              // formatter: "{c}",
            },
          },
        ],
      });
    },
  },
};
</script>
